<template>
    <!-- //外层在包含一个div -->
    <div>
      <div style="margin-top: 10px;">
        <!-- 不查询 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="formInline.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="formInline.rold" placeholder="用户角色">
            <template v-for="(item,index) in roldlist">
              <el-option :label="item.name" :value="item.id"></el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectinfo">查询</el-button>
        </el-form-item>
      </el-form> 

    </div>


    <!-- 用户列表 -->

    <template>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      
        <el-table-column
          prop="name"
          label="姓名"
          width="250">
        </el-table-column>
   
        <el-table-column
          prop="password"
          label="密码"
          width="250"
          show-overflow-tooltip
          :formatter="stateFormat"
          >
        </el-table-column>
        <el-table-column
        prop="rold"
        label="角色"
        width="220">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

          <el-tooltip class="item" effect="dark" content="超级管理有权限修改" placement="top">
           <span>
              <el-button
              size="mini"
              type="danger"
              @click="handleEdit(scope.$index, scope.row)" :disabled="disable">编辑</el-button>
            </span>
           
          </el-tooltip>
          
        </template>
      </el-table-column>

      </el-table>

    </template>

    <!-- 编辑的模态框-->
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible" @close="selectalluserlist">
      <el-form :model="modelinfo">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="modelinfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="modelinfo.password" autocomplete="off"></el-input>
        </el-form-item>
       
        <el-form-item label="用户角色">
          <el-select v-model="modelinfo.rold" placeholder="用户角色">
            <template v-for="(item,index) in roldlist">
                <el-option :label=item.name :value=item.id></el-option>
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateinfo">确 定</el-button>
      </div>
    </el-dialog>

    </div>
  </template>
  <script>
    //固定格式 每个组件都得导出
  export default{
    data(){
      return{
        formInline: {
          name: '',
          rold: ''
        },
        tableData: [{
          rold: '2016-05-02',
          name: '王小虎',
          password: '上海市普陀区金沙江路 1518 弄'
        } ],
        modelinfo:{
          id:0,
          rold: '2016-05-02',
          name: '王小虎',
          password: '上海市普陀区金沙江路 1518 弄'
        },
        dialogFormVisible:false,
        formLabelWidth:"80px",
        // 是否是管理员状态
        disable:true,
        //当前登录者的状态
        rold:'',
        roldlist:[]
      }

      
     
    },
    created(){
    
      this.selectalluserlist()
        
       this. rold=JSON.parse(localStorage.getItem('userInfo')).rold
       console.log(this.rold)
      if(this.rold=="超级管理员"){
        this.disable=false
      }
      this.selectroldlist()
    

     

    },
    methods:{
        //密码只有超级管理员才有权限查看
        stateFormat(row, column) {
            console.log(row.password)
            return '****'
  },

  //角色管理列表
  selectroldlist(){
    this.axios({
             url:this.$api+"/role/selectAll", 
             dataType:"json",
            method:'get',
            params:{
                   
              }         
          }).then(res=>{
            console.log("角色表的全部信息")
             console.log(res)
             this.roldlist=res.data

        
          }).catch(res=>{
            console.log(res)
          })
  },
   
      // 查询事件
   
    handleEdit(index, row) {
        console.log("hhahahhahahhahahhah")
      console.log(row)
      console.log(row.name)

      this.modelinfo=row
      console.log(this.modelinfo)
      this.dialogFormVisible=true


        console.log(index, row);
      },

     selectalluserlist(){
 //查询列表
 this.axios({
             url:this.$api+"/user/selectAll", 
             dataType:"json",
            method:'get',
            params:{
                   
              }         
          }).then(res=>{
           console.log("查询所有")
           console.log(res.data)
           var list=[]
           for(var i=0;i<res.data.length;i++){
            var item={}
            item["name"]=res.data[i].username
            item["password"]= res.data[i].userpass,
            item["rold"]=res.data[i].role.name,
            item["uid"]=res.data[i].uid
            list.push(item)
           }
             this.tableData=list

           }).catch(res=>{

       console.log(res)

          })
      },
      // 查询信息
      selectinfo(){

        this.axios({
             url:this.$api+'/user/selectByDynamic', 
             dataType:"json",
            method:'get',
            params:{
              username:this.formInline.name,
              roleId:this.formInline.rold
                 
              }         
          }).then(res=>{
            console.log(res)
            console.log("条件查询")
           
           var list=[]
           for(var i=0;i<res.data.length;i++){
            var item={}
            item["name"]=res.data[i].username
            item["password"]= res.data[i].userpass,
            item["rold"]=res.data[i].role.name,
            item["uid"]=res.data[i].uid
            list.push(item)
           }
             this.tableData=list

          }).catch(res=>{
           console.log(res)

            
          })

      },
      // 修改信息
      updateinfo(){

        //注意：因为修改信息 没有修改角色的的话 那个角色对应的是一个列表传过来的文字 那个就得
      var roldid=''

      if(typeof(this.modelinfo.rold)=="string"){
        for(var i=0;i<this.roldlist.length;i++){
            if(this.modelinfo.rold==this.roldlist[i].name){       
                roldid=this.roldlist[i].id
            }
        }
      }
      else{
        roldid=this.modelinfo.rold
      }
        console.log(this.modelinfo)
      console.log(roldid)
  
        this.axios({
             url:this.$api+'/user/update', 
             dataType:"json",
            method:'get',
            params:{
                uId:this.modelinfo.uid,
                username:this.modelinfo.name,
                userpass:this.modelinfo.password,
                roleId:roldid
            }     
          }).then(res=>{
            console.log(res)
           
            
            if(res.data==1){
              this.$message({
            type: 'success',
            message: '修改成功!'
          });
              this.dialogFormVisible=false
              this.selectalluserlist()
            }
          }).catch(res=>{
            this.selectalluserlist()
          })

      }
  
    }
  }
  </script>
   <style lang="less" scoped>
   .top {
      text-align: center;
    }
  </style>